import * as React from "react";
import { Button, DatePicker, Select } from "antd";
import moment from "moment";
import { getBuildUrl, getTopNameUrl } from "../serverApi";
import EleAndWater from "../../../../../../compontents/EleAndWater";
import { getNetWorkData } from "../../../../../../utils/common";
import "./index.less";

export interface FlowDiagramConditionProps {
  buildNames: string[];
  query: (paramJson: FlowDiagramConditionParam) => any;
}

export interface FlowDiagramConditionState {}

export interface FlowDiagramConditionParam {
  buildId: number | null;
  energyType: number;
  startTime: number;
  endTime: number;
}

const { Option } = Select;
const RangePicker:any= DatePicker.RangePicker;

class FlowDiagramCondition extends React.Component<
  FlowDiagramConditionProps,
  FlowDiagramConditionState
> {
  private start = moment().add(-7, "day").startOf("day");
  private end = moment().add(-1, "day").startOf("day");
  public paramJson: FlowDiagramConditionParam = {
    buildId: null,
    energyType: 1,
    startTime: this.start.valueOf(),
    endTime: this.end.valueOf(),
  };
  private buildSelectData: any = null;
  render() {
    return (
      <div className="Condition">
        <div className="rowcon_body" style={{ paddingTop: 16 }}>
          <div className="paramRow">
            <EleAndWater
              onChange={(type: number) => {
                this.paramJson.energyType = type;
              }}
            />
            <Select
              className="build"
              onChange={(value) => {
                this.onBuildChange(value);
              }}
            >
              {this.buildSelectData
                ? this.buildSelectData.map((item, index) => {
                    return (
                      <Option key={index} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })
                : ""}
            </Select>
            <RangePicker
              className="date"
              defaultValue={[
                moment().add(-7, "day").startOf("day"),
                moment().add(-1, "day").startOf("day"),
              ]}
              onChange={(dates) => {
                this.onDateChange(dates);
              }}
            />
            <Button
              className="btn"
              type="primary"
              onClick={() => {
                this.props.query(this.paramJson);
              }}
            >
              查询
            </Button>
          </div>
        </div>
      </div>
    );
  }

  componentWillMount() {
    getNetWorkData(getBuildUrl, null, this, (result) => {
      this.buildSelectData = result.data;
      this.buildSelectData.map((item) => {
        this.props.buildNames.push(item.name);
        return item;
      });
      getNetWorkData(
        getTopNameUrl,
        null,
        this,
        (res) => {
          let topName = res.data ? res.data : "全部";
          this.props.buildNames.unshift(topName);
          this.buildSelectData.unshift({ id: 0, name: topName });
          this.forceUpdate();
        },
        (err) => {
          let topName = "全部";
          this.props.buildNames.unshift(topName);
          this.buildSelectData.unshift({ id: 0, name: topName });
          this.forceUpdate();
        }
      );
    });
  }

  onDateChange(dates) {
    if (dates) {
      this.paramJson.startTime = moment(dates[0]).startOf("day").valueOf();
      this.paramJson.endTime = moment(dates[1]).startOf("day").valueOf();
    } else {
      this.paramJson.startTime = 0;
      this.paramJson.endTime = 0;
    }
  }

  onBuildChange(value) {
    this.paramJson.buildId = value;
  }
}
export default FlowDiagramCondition;
